// src/pages/task/schedule/components/ScheduleTable.tsx - 任务计划表格组件
import React from 'react';
import { Table, Tag, Space, Button, Popconfirm } from 'antd';
import { EditOutlined, DeleteOutlined, PlayCircleOutlined } from '@ant-design/icons';
import type { ColumnsType } from 'antd/es/table';
import { ScheduleItem } from '../types';
import ActionButtons from './ActionButtons';

interface ScheduleTableProps {
  schedules: ScheduleItem[];
  loading: boolean;
  pagination: {
    page: number;
    pageSize: number;
    total: number;
  };
  onPageChange: (pager: any) => void;
  onDelete: (id: number) => void;
  onEdit: (record: ScheduleItem) => void;
  onRun: (id: number, record: ScheduleItem) => void;
}

// 根据任务类型获取标签颜色
const getTaskTypeColor = (taskType: string) => {
  switch (taskType) {
    case 'normal':
      return 'blue';
    case 'interval':
      return 'green';
    case 'crontab':
      return 'orange';
    default:
      return 'default';
  }
};

// 根据任务类型获取中文显示
const getTaskTypeText = (taskType: string) => {
  switch (taskType) {
    case 'normal':
      return '普通任务';
    case 'interval':
      return '间隔任务';
    case 'crontab':
      return '定时任务';
    default:
      return taskType;
  }
};

const ScheduleTable: React.FC<ScheduleTableProps> = ({
  schedules,
  loading,
  pagination,
  onPageChange,
  onDelete,
  onEdit,
  onRun
}) => {
  const columns: ColumnsType<ScheduleItem> = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
      width: 80,
      align: 'center',
    },
    {
      title: '任务名称',
      dataIndex: 'name',
      key: 'name',
      sorter: (a, b) => a.name.localeCompare(b.name),
      align: 'center',
    },
    {
      title: '描述',
      dataIndex: 'description',
      key: 'description',
      render: (text) => text || '-',
      align: 'center',
    },
    {
      title: '任务类型',
      dataIndex: 'task_type',
      key: 'task_type',
      render: (text) => (
        <Tag color={getTaskTypeColor(text)} style={{ margin: '0 auto' }}>
          {getTaskTypeText(text)}
        </Tag>
      ),
      align: 'center',
    },
    {
      title: '状态',
      dataIndex: 'enable',
      key: 'enable',
      render: (enable: boolean) => (
        <Tag color={enable ? 'green' : 'red'} style={{ margin: '0 auto' }}>
          {enable ? '启用' : '禁用'}
        </Tag>
      ),
      align: 'center',
    },
    {
      title: 'Crontab表达式',
      dataIndex: 'crontab',
      key: 'crontab',
      render: (text) => text || '-',
      align: 'center',
    },
    {
      title: '最后执行时间',
      dataIndex: 'last_run_at',
      key: 'last_run_at',
      render: (text) => text || '-',
      align: 'center',
    },
    {
      title: '操作',
      key: 'action',
      width: 150,
      render: (_, record) => (
        <ActionButtons 
          record={record} 
          onRun={(id) => onRun(id, record)}
          onEdit={onEdit}
          onDelete={onDelete}
        />
      ),
      align: 'center',
    },
  ];

  return (
    <Table
      columns={columns}
      dataSource={schedules}
      loading={loading}
      rowKey="id"
      pagination={{
        current: pagination.page,
        pageSize: pagination.pageSize,
        total: pagination.total,
        showSizeChanger: true,
        showQuickJumper: true,
      }}
      onChange={onPageChange}
    />
  );
};

export default ScheduleTable;